let current = 0
let img_list = [
  'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
  'https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80',
  'https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
  'https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80',
  'https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
]


function setBackground() {
  document.body.style.backgroundImage = `url(${img_list[current]})`
}

setBackground()


let img_list_box = document.querySelector('.img_list')
let dot_box = document.querySelector('.dot')

function createdImgBox(src) {
  let box = document.createElement('div')
  box.classList.add('img')
  box.style.backgroundImage = `url(${src})`
  return box
}


function createdDot(index) {
  let box = document.createElement('div')
  box.classList.add('dot_item')
  if (current == index) {
    box.classList.add('active')
  }
  return box
}


function initPage() {
  img_list.forEach((item, index) => {
    img_list_box.appendChild(createdImgBox(item))
    dot_box.appendChild(createdDot(index))
  })
}

initPage()


let prev_btn = document.querySelector('.prev')
let next_btn = document.querySelector('.next')

function dotChange() {
  let dot_list = document.querySelectorAll('.dot_item')
  dot_list.forEach((dot, index) => {
    if (index == current) {
      dot.classList.add('active')
    } else {
      dot.classList.remove('active')

    }
  })
}

next_btn.addEventListener('click', function () {
  current++
  if (current > (img_list.length - 1)) {
    current = 0
  }
  dotChange()
  setBackground()
  img_list_box.style.transform = `translateX(-${(current) * 1000}px)`
})

prev_btn.addEventListener('click', function () {
  current--
  if (current <= 0) {
    current = img_list.length - 1
  }
  dotChange()
  setBackground()
  img_list_box.style.transform = `translateX(${-(current) * 1000}px)`
})